<template>
    <div class="project-set">
        <el-card shadow="hover">
            <div slot="header" class="clearfix">
                <span>基本信息</span>
                <el-button class="btn" type="text" @click="handleEdit">{{isEdit?'保存':'修改'}}</el-button>
            </div>
            <el-form ref="form" :model="item" :rules="rules">
                <el-form-item label="负责人：">{{item.ownerUserName}}</el-form-item>
                <el-form-item label="创建日期：">{{item.createTime}}</el-form-item>
                <el-form-item label="项目名称：" prop="projectName">
                    <el-input :disabled="!isEdit" clearable placeholder="请输入项目名称" v-model="item.projectName"></el-input>
                </el-form-item>
                <el-form-item label="项目代码：">{{item.projectCode}}</el-form-item>
                <el-form-item label="项目描述：">
                    <el-input :disabled="!isEdit" :maxlength="100" type="textarea" :rows="5" clearable placeholder="请输入项目描述" v-model="item.description"></el-input>
                </el-form-item>
            </el-form>
        </el-card>
        <el-card shadow="hover">
            <div slot="header" class="clearfix">
                <span>删除项目</span>
                <el-button class="btn" type="text" @click="remove">删除</el-button>
            </div>
            <span>项目删除后就再也不可恢复了，请谨慎操作！</span>
        </el-card>
        <el-card shadow="hover">
            <div slot="header" class="clearfix">
                <span>转让项目</span>
                <el-button class="btn" type="text" @click="handleGive">转让</el-button>
            </div>
            <span>项目转让后就再也不可恢复了，请谨慎操作！</span>
        </el-card>
        <give-dialog v-if="giveData.show" :giveData="giveData" @save="handleGiveSave"></give-dialog>
    </div>
</template>
<script>
import GiveDialog from './GiveDialog'
export default {
    name: 'InfoSet',
    components: { GiveDialog },
    data () {
        const projectId = this.$route.params.id
        return {
            projectId,
            username: JSON.parse(localStorage.getItem('USER')).username,
            giveData: {
                show: false,
                title: '转让项目',
                value: '',
                list: []
            },
            item: { ownerRealName: null, createTime: null, projectName: null, description: null },
            isEdit: false,
            rules: {
                projectName: [
                    { required: true, message: '请输入项目名称', trigger: 'blur' },
                    { min: 3, max: 30, message: '长度在 3 到 30 个字符', trigger: 'blur' }
                ]
            }
        }
    },
    created () {
        this.init()
    },
    methods: {
        init () {
            this.$post('/project/queryById', { projectId: this.projectId }).then(res => {
                if (res) {
                    this.item = res
                }
            })
        },
        handleGive () {
            this.getGiveList()
        },
        handleGiveSave () {
            const params = {
                dstOwner: this.giveData.value,
                projectId: this.projectId
            }
            this.$post('/member/changeProjectOwner', params).then(res => {
                if (res) {
                    this.giveData.show = false
                    this.$message.success('转让项目成功')
                }
            })
        },
        getGiveList () {
            const params = {
                pageNum: -1,
                projectId: this.projectId
            }
            this.$post('/member/queryProjectMembers', params).then(res => {
                if (res) {
                    this.giveData.list = res.rows.filter(v => v.username !== this.username)
                    this.giveData.show = true
                }
            })
        },
        remove () {
            this.$confirm('确定要删除该项目吗?', '提示', {
                confirmButtonText: '确 定',
                cancelButtonText: '取 消',
                type: 'warning'
            }).then(() => {
                const params = {
                    projectId: this.projectId
                }
                this.$post('/project/delete', params).then(res => {
                    if (res) {
                        this.$message.success('删除成功')
                    }
                })
            }).catch(() => {})
        },
        updated () {
            const { projectDesc, projectName, cacheExpireDays } = this.item
            const params = {
                cacheExpireDays,
                projectDesc,
                projectId: this.projectId,
                projectName
            }
            this.$post('/project/update', params).then(res => {
                if (res) {
                    this.$message.success('保存成功')
                    this.isEdit = false
                    this.init()
                }
            })
        },
        handleEdit () {
            if (this.isEdit) {
                this.$refs['form'].validate((valid) => {
                    if (valid) {
                        this.updated()
                    } else {
                        return false
                    }
                })
            } else {
                this.isEdit = true
            }
        }
    }
}
</script>
<style lang="less">
    .project-set {
        .btn {
            float: right;
            padding: 3px 0;
            font-size: 14px;
        }
        .el-card {
            margin-bottom: 5px;
        }
    }
</style>
